<template>
  <div class="divs">
    <el-container class="div1">
      <el-header class="header">
      </el-header>
      <el-container class="div2">
        <el-aside class="aside">
          <!--        <switch></switch>-->
          <SideMenu class="menu"></SideMenu>
        </el-aside>
        <el-container class="div3">
          <el-main class="main">
            <books class="books-area"></books>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import SideMenu from './SideMenu'
import Books from './Books'
export default {
  name: 'AppLibrary',
  components: {SideMenu, Books},
  data: function () {
    return {
      search1: '',
      search2: ''
    }
  },
  methods: {
    listByCategory () {
      var _this = this
      var tid = this.$refs.sideMenu.cid
      var url = 'library/type/' + tid + '/books'
      this.$axios.get(url).then(resp => {
        if (resp && resp.data.code === 200) {
          _this.$refs.booksArea.books = resp.data
          _this.$refs.booksArea.currentPage = 1
        }
      })
    }
  }
}
</script>

<style scoped>
  .books-area {
    width: 990px;
    margin-left: 20px;
    margin-right: auto;
  }
  .input-with-select {
    align-self: center;
    width: 45%;
    margin-left: 30%;
    height: 30px;
    margin-top: 13px;
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
    z-index:99999;
  }
  .aside {
    width: 200px;
    background-color: #F2F6FC;
  }
  .div1{
    width: 100%;
    height: 100%;
    background: #F2F6FC;
  }
  .header {
    height: 10px;
  }
  .div2 {
    background: #EBEEF5;
  }
  .divs {
    background: #F2F6FC;
    height: 813px;
  }
</style>
